<script setup>
import { ref, watch } from "vue";
import pageTop from "@/components/GengNan/pageTop.vue";
import { verifyQrcode, payment } from "@/server/api/profile";

import { getJWTFun } from "@/hook/jsrsasign";
import { routeQuery } from "@/hook/routerHandle";
import { useRouter } from "vue-router";
import { showDialog, showToast, showLoadingToast, closeToast } from "vant";
import { OpenChildrenPage } from "@/hook/routerHandle";
import { useUseStore } from "@/stores/user";

import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter;
const UserStore = useUseStore();
// let jwt = jwt1;
const money = ref("");
// const payload = ref('');
const item = routeQuery();
console.log("item123:", item);
const shopId = item.shopId;
const shopName = item.shopName;
const userImage = item.userImage;
console.log("shopId:", shopId);
// let token = null;
// watch(money, () => {

// });

//jsrsasign配置
const pay = async () => {
  console.log("发送qrcode请求111");
  // let res = await verifyQrcode("f2f0_Y8S3wsZFQUtZ5cnMvjT_G9HiCDJ9GVImlEhZpBCjFVFCNUl8NsmoIU8nsoTDT-f");
  if (money.value <= 0) {
    showToast(t("pay.payTip"));
    return
  }
  let token = getJWTFun({
    shopId: shopId,
    userId: UserStore.userId,
    transactionAmount: money.value,
    exp: Math.floor(Date.now() / 1000) + 3600 * 8,
  });
  console.log("t:", token);
  showLoadingToast({
    message: t("hotelPage.message"),
    forbidClick: true,
  });
  let res = await payment(token);
  // console.log(res);
  closeToast();
  showDialog({ message: res.data.msg }).then(() => {
    OpenChildrenPage("/MeView");
  });
};
const testverify = async () => {
  let res = await verifyQrcode(
    "f2f0_Y8S3wsZFQUtZ5cnMvjT_G9HiCDJ9GVImlEhZpBCjFVFCNUl8NsmoIU8nsoTDT-f"
  );
  console.log("verifyQrcode:", res);
};
</script>
<template>
  <div class="container">
    <header class="header">
      <pageTop></pageTop>
      <h3>{{ $t("pay.title") }}</h3>
    </header>
    <div class="paytoPersion">
      <h3>
        {{ $t("payment.payfor") }}
        {{ shopName }}
        {{ $t("payfor.shop") }}</h3>
      <img :src="UserStore.ing + userImage" alt="" />
    </div>
    <div class="main">
      <h4>{{ $t("order.total") }}</h4>
      <div class="amount">
        <span class="unit">eCNY</span>
        <input type="text" class="price" v-model="money" />
      </div>
      <div class="payment">
        <h3 @click="pay">{{ $t("pay.title") }}</h3>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #e6e6e6;

  .header {
    // display: flex;
    // align-items: center;

    h3 {
      position: absolute;
      z-index: 99;
      left: 0;
      top: 4rem;
      width: 100vw;
      text-align: center;
      font-size: 24rem;
      // background-color: rgb(175, 175, 210);
    }
  }

  .paytoPersion {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 28rem 32rem;

    h3 {
      font-size: 16rem;
    }

    img {
      height: 40rem;
    }
  }

  .main {
    padding: 28rem 32rem;
    height: calc(100vh - 136.1rem);
    border-radius: 20rem 20rem 0 0;
    background-color: #fff;

    h4 {
      color: #5c5b5b;
      font-size: 16rem;
      margin-bottom: 8rem;
    }

    .amount {
      display: flex;
      border-bottom: 1rem solid #e5e5e5;

      .unit {
        font-size: 20rem;
        color: #642e8e;
        padding-right: 10rem;
      }

      .price {
        width: 290rem !important;
        font-size: 30rem;
      }
    }

    .payment {
      position: fixed;
      bottom: 50rem;
      right: 32rem;
      // margin-top: 500rem;
      // background-color: #5c5b5b;

      h3 {
        width: 100rem;
        text-align: center;
        font-size: 24rem;
        padding: 10rem 10rem;
        color: #fff;
        background-color: #642e8e;
      }
    }
  }
}
</style>
